<!-- 首页  -->
<template>
    <div class="">
        <el-row class="links-scrollbar" v-infinite-scroll="load" style="overflow: auto;">
            <el-col class="link" :span="6" v-for="(item, index) in filterLinks" :key="index">
                <el-card :body-style="{ padding: '15px' }">
                    <div class="front">
                        <div class="thumbnail"> <img :src="item.logo == '' ? baseInfo.defaultHeader : item.logo"> </div>
                        <div class="info">
                            <span class="name" :title="item.name"> 名称: {{ item.name == '' ? authorInfo.nickname : item.name }}</span>
                            <span class="tags"> 标签: {{ item.tags == '' ? authorInfo.name : item.tags }}</span>
                            <span class="time"> 创建时间: {{ setFormatDate(item.createAt, 'date') }}</span>
                        </div>
                    </div>
                    <div class="back">
                        <a class="name" :href="item.url" target="_blank" :title="item.name"> 名称: {{ item.name == '' ? authorInfo.nickname : item.name }}</a>
                        <span class="url"> 链接: {{ item.url }} </span>
                        <span class="description"> 详情: {{ item.description }} </span>
                    </div>
                </el-card>
            </el-col>
        </el-row>
        <el-backtop target=".links-scrollbar" :bottom="100" :right="60">
            <span> UP </span>
        </el-backtop>
    </div>
</template>
<script>
import { mapGetters } from 'vuex'
import _json from '@/assets/json/all.json'
import _tags from '@/assets/json/tags.json'
export default {
    name: 'home',
    data() {
        return {
            activeName: 'Link',
            links: [],
            searchText: '',

            tags: [],
            searchTag: '',
            show: true,
            count: 0,
            drawer: false,
            direction: 'rtl',
        }
    },
    watch: {
        'searchText': function(val) {
            this.show = !this.show;
            setTimeout(_ => {
                this.show = true;
            }, 1000);
        }
    },
    computed: {
        filterTag: function(value) {
            var key = this.searchTag;
            var tags = this.tags;
            return tags.filter(function(item) {
                return item.toLowerCase().indexOf(key.toLowerCase()) != -1
            });
        },
        filterLinks: function(value) {
            var key = this.searchText;
            var links = this.links;
            return links.filter(function(item) {
                return item.name.toLowerCase().indexOf(key.toLowerCase()) != -1
            });
        },
        ...mapGetters('vsAdmin/account', [
            'login'
        ])
    },
    mounted() {
        this.links = _json;
        this.tags = _tags;
        console.log(this.$store.state);
    },
    methods: {

        handleClose(done) {
            this.$confirm('确认关闭？').then(_ => {
                done();
            }).catch(_ => {});
        },

        load() {
            this.count += 7
        },
        // 处理 菜单 选择
        handleMenuSelect(key, keyPath) {
            console.log(key, keyPath);
            // this.$router.push({
            // name: '_Info'
            // });
        },

        // 处理 链接名称 搜索选择
        handleSearchTextSelect(key, keyPath) {
            this.searchText = key.name;
            // this.$router.push({
            // name: '_Info2'
            // });
            console.log(key, keyPath);
        },
        // 链接名称 查询 搜索
        queryNameSearch(queryString, cb) {
            let links = this.links;
            let results = queryString ? links.filter(this.optionFilter(queryString, 'name')) : links;
            cb(results);
        },
        // 链接名称 数据选项 过滤器
        optionFilter(queryString, attribute) {
            return (item) => {
                return (item[attribute].toLowerCase().indexOf(queryString.toLowerCase()) === 0);
            }
        },


        // 处理 链接标签 搜索选择
        handleSearchTagSelect(key, keyPath) {
            this.searchTag = key;
            // this.$router.push({
            // name: '_Info3'
            // });
            console.log(key, keyPath);
        },
        // 链接标签 查询 搜索
        queryTagSearch(queryString, cb) {
            let tags = this.tags;
            let results = queryString ? tags.filter(this.tagsFilter(queryString)) : tags;
            cb(results);
        },
        // 链接标签 数据选项 过滤器
        tagsFilter(queryString) {
            return (item) => {
                return (item.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
            }
        },


    }
}

</script>
<style></style>
